<template>
  <div class="content">
    <div class="page-title">
      <div class="left">
        <div class="bar" />
        <span class="title">设备录像</span>
      </div>
      <div class="right" @click="goBack()">
        <img src="@/assets/images/c6/back.png" class="icon">
        <span class="back">返回</span>
      </div>
    </div>
    <div class="main">
      <div class="recordPicker">
        <el-date-picker v-model="chooseDate" size="mini" type="date" value-format="yyyy-MM-dd" placeholder="日期" style="width: 100%;" @change="dateChange()" />
        <div v-loading="recordsLoading" class="recordList">
          <div class="record-list-box">
            <ul v-if="detailFiles.length >0">
              <li v-for="item in detailFiles" class="recordListItem">
                <el-tag :type="chooseFile !== item ? '':'danger'" @click="checkedFile(item)">
                  <i class="el-icon-video-camera" />
                  {{ moment(item.startTime).format('HH:mm:ss') }}-{{ moment(item.endTime).format('HH:mm:ss') }}
                </el-tag>
              </li>
            </ul>
          </div>
          <div v-if="detailFiles.length ==0" class="noVal">暂无数据</div>
        </div>
      </div>
      <div class="playContainer">
        <div class="videoBox">
          <video id="videoElement" controls autoplay muted width="100%" height="100%" />
          <img src="@/assets/images/c6/capture.png" class="capture" @click="getSnap">
        </div>
        <div class="playOptionBox">
          <el-time-picker
            v-model="timeRange"
            is-range
            align="center"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            @change="timePickerChange" />
        </div>
        <div class="slide">
          <el-slider
            id="playtimeSlider"
            v-model="playTime"
            class="playtime-slider"
            :disabled="detailFiles.length === 0"
            :min="sliderMIn"
            :max="sliderMax"
            :range="true"
            :format-tooltip="playTimeFormat"
            :marks="playTimeSliderMarks"
            @change="playTimeChange" />
          <!--          <div class="slider-val-box">-->
          <!--            <div v-for="item of detailFiles" class="slider-val" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'" />-->
          <!--          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import flvjs from 'flv.js'
import moment from 'moment'
import { playVideo, getSnap, queryRecords, playRecord } from '@/api/cms/monitor/play'
export default {
  data() {
    return {
      sliderMIn: 0,
      sliderMax: 86400,
      recordsLoading: false,
      streamId: '',
      flvPlayer: null,
      flvUrl: null,
      chooseDate: null,
      playTime: null,
      timeRange: null,
      startTime: null,
      endTime: null,
      chooseFile: null,
      playTimeSliderMarks: {
        0: '00:00',
        3600: '01:00',
        7200: '02:00',
        10800: '03:00',
        14400: '04:00',
        18000: '05:00',
        21600: '06:00',
        25200: '07:00',
        28800: '08:00',
        32400: '09:00',
        36000: '10:00',
        39600: '11:00',
        43200: '12:00',
        46800: '13:00',
        50400: '14:00',
        54000: '15:00',
        57600: '16:00',
        61200: '17:00',
        64800: '18:00',
        68400: '19:00',
        72000: '20:00',
        75600: '21:00',
        79200: '22:00',
        82800: '23:00',
        86400: '24:00'
      },
      detailFiles: [],
      // 路由参数
      voh_config: {
        deviceIdentification: '',
        channelId: ''
      }
    }
  },
  activated() {
    // 获取路由参数
    this.voh_config = Object.assign(this.voh_config, JSON.parse(this.$route.query.row))
  },
  mounted() {
    // 获取路由参数
    this.chooseDate = moment().format('YYYY-MM-DD')
    this.voh_config = Object.assign(this.voh_config, JSON.parse(this.$route.query.row))
    this.dateChange()
  },
  methods: {
    // 播放
    play() {
      this.flvPlayer.play()
    },
    // 时间格式化
    moment(v) {
      return moment(v)
    },
    // 视频时间点击事件
    timePickerChange(val) {
      this.setTime(val[0], val[1])
    },
    // 时间筛选框
    dateChange() {
      if (!this.chooseDate) {
        return
      }
      this.setTime(this.chooseDate + ' 00:00:00', this.chooseDate + ' 23:59:59')
      this.recordsLoading = true
      this.detailFiles = []
      var queryParam = {
        deviceIdentification: this.voh_config.deviceIdentification,
        channelId: this.voh_config.channelId,
        startTime: this.startTime,
        endTime: this.endTime
      }
      queryRecords(queryParam).then(res => {
        console.log(res)
        console.log(res.recordList)
        this.recordsLoading = false
        if (res.recordList && res.recordList.length > 0) {
          this.detailFiles = res.recordList
        }
      }).catch((e) => {
        this.recordsLoading = false
      })
    },
    // 时间设置
    setTime(startTime, endTime) {
      this.startTime = startTime
      this.endTime = endTime
      const start = (new Date(this.startTime).getTime() - new Date(this.chooseDate + ' 00:00:00').getTime()) / 1000
      const end = (new Date(this.endTime).getTime() - new Date(this.chooseDate + ' 00:00:00').getTime()) / 1000
      console.log(start)
      console.log(end)
      this.playTime = [start, end]
      this.timeRange = [startTime, endTime]
    },
    // 文件选择
    checkedFile(file) {
      console.log(file)
      this.chooseFile = file
      this.setTime(file.startTime, file.endTime)
      console.log(this.playTime)
    },
    // 时间格式化
    playTimeFormat(val) {
      const h = parseInt(val / 3600)
      const m = parseInt((val - h * 3600) / 60)
      const s = parseInt(val - h * 3600 - m * 60)

      let hStr = h
      let mStr = m
      let sStr = s
      if (h < 10) {
        hStr = '0' + hStr
      }
      if (m < 10) {
        mStr = '0' + mStr
      }
      if (s < 10) {
        sStr = '0' + sStr
      }
      return hStr + ':' + mStr + ':' + sStr
    },
    // 播放时间change
    playTimeChange(val) {
      console.log(val)

      const startTimeStr = moment(new Date(this.chooseDate + ' 00:00:00').getTime() + val[0] * 1000).format('YYYY-MM-DD HH:mm:ss')
      const endTimeStr = moment(new Date(this.chooseDate + ' 00:00:00').getTime() + val[1] * 1000).format('YYYY-MM-DD HH:mm:ss')

      this.setTime(startTimeStr, endTimeStr)

    // this.playRecord();
    },
    getTimeForFile(file) {
      const startTime = new Date(file.startTime)
      const endTime = new Date(file.endTime)
      return [startTime, endTime, endTime.getTime() - startTime.getTime()]
    },
    getDataWidth(item) {
      const timeForFile = this.getTimeForFile(item)
      const result = (timeForFile[2]) / ((this.sliderMax - this.sliderMIn) * 1000)
      return result * 100
    },
    getDataLeft(item) {
      const timeForFile = this.getTimeForFile(item)
      const differenceTime = timeForFile[0].getTime() - new Date(this.chooseDate + ' 00:00:00').getTime()
      return parseFloat((differenceTime - this.sliderMIn * 1000) / ((this.sliderMax - this.sliderMIn) * 1000)) * 100
    },
    // 设备录像播放
    playRecord() {
      var queryParam = {
        deviceIdentification: this.voh_config.deviceIdentification,
        channelId: this.voh_config.channelId,
        startTime: this.startTime,
        endTime: this.endTime
      }
      playRecord(queryParam).then(res => {
        console.log(res)
      }
      )
    },
    // 抓图
    getSnap() {
      if (this.flvUrl) {
        getSnap({ 'flvUrl': this.flvUrl }).then(res => {
          const blob = new Blob([res])
          const fileName = 'snap' + new Date().getMilliseconds() + '.png'
          const dlink = document.createElement('a')
          if ('download' in document.createElement('a')) { // 非IE下载
            const dlink = document.createElement('a')
            dlink.download = fileName
            dlink.style.display = 'none'
            dlink.href = URL.createObjectURL(blob)
            document.body.appendChild(dlink)
            dlink.click()
            URL.revokeObjectURL(dlink.href) // 释放URL 对象
            document.body.removeChild(dlink)
          } else { // IE10+下载
            navigator.msSaveBlob(blob, fileName)
          }
        })
      }
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 96%;
    background: #f1f4fb;
    padding: 5px 15px 15px 15px;
    overflow-y: auto;
  }
  .page-title{
    height: 5%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    .left{
      height: 100%;
      align-items: center;
      display: flex;
      flex-direction: row;
      margin-left: 3px;
      .bar{
        width: 7px;
        height: 70%;
        border-radius: 2px;
        background: #409EFF;
        margin-right: 10px;
      }
      .title{
        font-weight: 600;
        font-size: 18px;
        color: #303133;
      }
    }
    .right{
      height: 100%;
      align-items: center;
      display: flex;
      flex-direction: row;
      line-height: 100%;
      .icon{
        margin-right: 5px;
        height: 60%;
        width: auto;
      }
      .back{
        font-size: 16px;
        color: #409EFF;
      }

    }
  }
  .main{
    width: 100%;
    height: 94%;
    display: flex;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 5px rgba(0, 47, 138, 0.04);
    background-color: #ffffff;
    flex-direction: row;
    justify-content: space-between;
    .recordPicker{
      width: 15%;
      height: 100%;
      .recordList{
        margin-top: 10px;
        background-color: #f1f4fb;
        width: 100%;
        height: 95%;
        padding: 10px;
        position: relative;
        .noVal{
          position: absolute;
          top: 45%;
          left: 35%;
          color: #9d9f90;
        }
        .recordListItem{
          margin-bottom: 10px;
        }
      }
    }
    .playContainer{
      width: 84%;
      height: 100%;
      background-color: #ffffff;
      .videoBox{
        width: 100%;
        height: 80%;
        position: relative;
      }
      .capture{
        position: absolute;
        right: 25px;
        top: 20px;
        width: 20px;
        border-radius: 15%;
        background-color: #838283;
      }
      .playOptionBox{
        padding: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .slide{
        width: 100%;
      }
    }
  }
</style>
